<template>
  <div style="width: 100%" class="modelp">
    <el-table
      v-if="!showPropertyParam"
      size="small"
      :data="modelParams"
      style="width: 100%"
      :header-cell-style="headerStyle"
      class="table"
    >
      <el-table-column
        prop="name"
        label="参数名称"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="identifier"
        label="标识符"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="dataType.type"
        label="类型"
        width="80"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot="header">
          <el-button @click="addParams" type="primary" size="small"
            >添加参数</el-button
          >
        </template>
        <template slot-scope="scope">
          <!-- <el-button size="small" @click="handleParamEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm title="确认要删除该功能吗？" @confirm="deleteParam(scope.$index)">
              <el-button size="small"  type="danger" slot="reference">删除</el-button>
            </el-popconfirm> -->
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="bottom"
          >
            <!-- v-permission="{ action: 'product:edit' }" -->
            <i
              @click="handleParamEdit(scope.$index, scope.row)"
              class="iconfont tianxie tableBtnIcon"
            ></i>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="bottom"
          >
            <!-- v-permission="{ action: 'product:delete' }" -->
            <i
              @click="deleteParam(scope.$index)"
              class="iconfont shanchu tableBtnIcon"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-tabs v-if="showPropertyParam" type="border-card">
      <el-tab-pane label="参数设置">
        <property-model
          ref="propertyModelRef"
          :property="currParamProperty"
          :enumItems="enumItems"
          :boolItem="boolItem"
          :jsonString="jsonString"
          :isService="isService"
          :isProperty="false"
          :is-update="!isAdd"
        ></property-model>
        <el-row>
          <el-col :span="16"></el-col>
          <el-col :span="8">
            <el-button size="small" @click="cancelEditParam()">取消</el-button>
            <el-button size="small" @click="saveParam()" type="primary"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import PropertyModel from "./PropertyModel.vue";
import { ParseProperty } from "@/utils/util.ts";
import tableStyleMixin from "@mixin/table-style";

export default {
  props: {
    modelParams: {
      type: Array,
      default: () => [],
    },
    isUpdate: {
      type: Boolean,
      default: false,
    },
    isService: {
      type: Boolean,
      default: false,
    },
  },
  mixins: [tableStyleMixin],
  components: {
    PropertyModel,
  },
  data() {
    return {
      showPropertyParam: false,
      isAdd: true,
      currParamProperty: {
        name: "",
        identifier: "",
        description: "",
        type: "property",
        dataType: {
          specs: "",
        },
      },
      enumItems: [{}],
      boolItem: {
        _true: "",
        _false: "",
      },
      jsonString: "",
    };
  },
  methods: {
    handleParamEdit(index, row) {
      console.log(row, "row");
      this.isAdd = false;
      this.showPropertyParam = true;
      this.currParamProperty = row;

      let specs = row.dataType.specs;
      if (row.dataType.type === "enum" && specs) {
        let enumSpecs = [];
        for (let p in specs) {
          enumSpecs.push({
            name: specs[p],
            value: p,
          });
        }
        this.enumItems = enumSpecs;
      }
      if (row.dataType.type === "bool" && specs) {
        this.boolItem = {
          _true: specs["0"],
          _false: specs["1"],
        };
      }
      if (row.dataType.type === "json" && specs) {
        this.currParamProperty.dataType.specs = specs;
      }
    },
    addParams() {
      this.isAdd = true;
      this.showPropertyParam = true;
      this.currParamProperty = {
        name: "",
        identifier: "",
        description: "",
        type: "property",
        dataType: {
          specs: {},
        },
      };
      this.enumItems = [{}];
      this.boolItem = {
        _true: "",
        _false: "",
      };
    },
    deleteParam(index) {
      this.modelParams.splice(index, 1);
    },
    cancelEditParam() {
      this.showPropertyParam = false;
    },
    newProperty() {
      return ParseProperty(
        this.currParamProperty,
        this.enumItems,
        this.boolItem
      );
    },
    async saveParam() {
      const valid = await this.$refs.propertyModelRef.validate();
      if (!valid) return;
      if (this.isAdd) {
        let data = this.newProperty();
        if (
          data.dataType &&
          data.dataType.type &&
          data.dataType.type == "json"
        ) {
          let string = JSON.parse(JSON.stringify(data));
          data.value = JSON.stringify(string);
        }
        this.modelParams.push(data);
      } else {
        let prop = this.newProperty();
        for (let i = 0; i < this.modelParams.length; i++) {
          if (this.modelParams[i].identifier === prop.identifier) {
            this.modelParams[i] = prop;
          }
        }
      }
      this.showPropertyParam = false;
    },
  },
};
</script>

<style lang="less" scoped>
// 参数设置文字
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: @primaryThemeTxtColor2;
}
// 编辑删除按钮
.tableBtnIcon {
  font-size: 18px;
  cursor: pointer;
  margin: 0 10px;
}
</style>
